<template>
  <div>
    <div
      v-show="show"
      style="position: absolute; width: 1px; left: 0px; top: 0px; bottom: 0px"
      class="border"
    ></div>
    <div
      v-show="show"
      style="position: absolute; width: 1px; right: 0px; top: 0px; bottom: 0px"
      class="border"
    ></div>

    <div
      v-show="show"
      style="position: absolute; height: 1px; left: 0px; top: 0px; right: 0px"
      class="border"
    ></div>
    <div
      v-show="show"
      style="position: absolute; height: 1px; right: 0px; bottom: 0px; left: 0px"
      class="border"
    ></div>
    <template v-if="!show">
      <div
        class="click-area"
        :style="Object.assign({ position: 'absolute'}, fakeArea)"
        @click="callHooks('select')"
      ></div>
    </template>

    <div v-show="show" class="icon drag-icon" style="left: 0px; top: 0px; position: absolute">
      <s-icon type="drag-outlined"></s-icon>
    </div>
    <div
      v-show="show"
      class="icon warn"
      style="left: 30px; top: 0px; position: absolute; z-index: 2"
      @focus.stop="() => {}"
      @click="callHooks('remove')"
    >
      <s-icon type="delete-outlined"></s-icon>
    </div>
  </div>
</template>
<script>
import SIcon from '@/components/extends/icon/index.vue'

export default {
  name: 'DragTool',
  components: { SIcon },
  expose: ['toggleVisible', 'addHooks'],
  props: {
    clickArea: {
      type: Object,
      required: true
    }
  },
  data() {
    return { show: false, hooks: {}, fakeArea: this.clickArea }
  },
  watch: {
    clickArea: {
      handler: function (val, oldVal) {
        this.fakeArea = val
      },
      deep: true
    }
  },
  methods: {
    toggleVisible(visible) {
      this.show = visible
    },
    changeClickArea(obj) {
      this.fakeArea = obj
    },
    callHooks(key) {
      const hook = this.hooks[key]
      if (hook) {
        hook()
      }
    },
    addHooks(value) {
      this.hooks = value
    }
  }
}
</script>
<style scoped lang="less">
@import '@/style/colors.less';

.border {
  background-color: var(--skrivet-primary-color);
}

.icon {
  background-color: var(--skrivet-primary-color);
  color: white;
  width: 28px;
  height: 28px;
  padding-left: 5px;
  position: absolute;
  color: white;
  font-size: 18px;
}

.warn {
  background-color: var(--skrivet-warn-color);
}
</style>
